<!doctype html>
<html class="no-js">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="description" content="">
		<meta name="keywords" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>车生活</title>

		<!-- Set render engine for 360 browser -->
		<meta name="renderer" content="webkit">

		<!-- No Baidu Siteapp-->
		<meta http-equiv="Cache-Control" content="no-siteapp" />

		<link rel="icon" type="image/png" href="assets/i/favicon.png">

		<!-- Add to homescreen for Chrome on Android -->
		<meta name="mobile-web-app-capable" content="yes">
		<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">

		<!-- Add to homescreen for Safari on iOS -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-title" content="车生活" />
		<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">

		<link rel="stylesheet" href="assets/css/amazeui.min.css">
		<link rel="stylesheet" href="assets/css/app.css">
		<style type="text/css">
			[data-am-widget="tabs"] {
				margin: 0 !important;
			}
			.am-tabs {
				margin: 0;
			}
			.am-tabs-bd {
				border: 0;
			}
			.am-tabs-bd .am-tab-panel {
				padding: 0;
			}
			.am-list {
				margin-bottom: 0 !important;
			}
			.am-list-news-default .am-list .am-list-item-desced {
				margin-bottom: 5px;
				padding-bottom: 5px;
			}
			.am-list-phone {
				position: absolute;
				float: right;
				right: 5px;
				top: 30%;
			}
		</style>
	</head>

	<body>

		<header data-am-widget="header" class="am-header am-header-default">
			<div class="am-header-left am-header-nav">
				<a href="javascript:history.go(-1)" class="">
					<i class="am-header-icon am-icon-chevron-left"></i>
				</a>
			</div>
			<h1 class="am-header-title">
    <a href="#title-link" class="">我的订单</a>
  </h1>
			<div class="am-header-right am-header-nav" style="display: block;">
				<a href="javascript:;" id="nav_edit" class="">编辑</a>
			</div>
		</header>
		<!--分割空白-->
		<div style="height: 50px;"></div>
		<div data-am-widget="tabs" class="am-tabs am-tabs-d2">
			<ul class="am-tabs-nav am-cf">
				<li class="am-active"><a href="[data-tab-panel-0]">全部</a></li>
				<li class=""><a href="[data-tab-panel-1]">未付款</a></li>
				<li class=""><a href="[data-tab-panel-2]">未消费</a></li>
				<li class=""><a href="[data-tab-panel-3]">已消费</a></li>
			</ul>
			<div class="am-tabs-bd">
				<!--商品服务-->
				<div data-tab-panel-0 class="am-tab-panel am-active">
					<div data-am-widget="list_news" class="am-list-news am-list-news-default" style="margin: 0;">
						<div class="am-list-news-bd">
							<ul class="am-list">
								<!--缩略图在标题左边-->
								<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left" onclick="location.href='detailorder.html' ; ">
									<span class="am-u-sm-1 edit-radio am-text-primary am-icon-circle-o"></span>
									<div class="am-u-sm-3 am-list-thumb">
										<img src="assets/i/sj/10.jpg" />
									</div>
									<div class=" am-u-sm-9 am-list-main">
										<h3 class="am-list-item-hd">
					              人工普通洗车&nbsp;&nbsp;&nbsp;&nbsp;
					            </h3>
										<div class="am-list-item-text">数量：1&nbsp;&nbsp;总价：18</div>
										<button class="am-btn am-lfet  am-btn-sm am-btn-warning">未消费</button>
									</div>
									<div class="am-list-phone">
										<span class="am-primary am-icon-md am-icon-angle-right"></span>
									</div>
								</li>
								<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left" onclick="location.href='serdetail.html'">
									<span class="am-u-sm-1 edit-radio am-text-primary am-icon-circle-o"></span>
									<div class="am-u-sm-3 am-list-thumb">
										<img src="assets/i/sj/10.jpg" />
									</div>
									<div class=" am-u-sm-9 am-list-main">
										<h3 class="am-list-item-hd">
					              人工普通洗车&nbsp;&nbsp;&nbsp;&nbsp;
					            </h3>
										<div class="am-list-item-text">数量：1&nbsp;&nbsp;总价：18</div>
										<button class="am-btn am-lfet am-btn-sm">已消费</button>
									</div>
									<div class="am-list-phone">
										<span class="am-primary am-icon-md am-icon-angle-right"></span>
									</div>
								</li>
								<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left" onclick="location.href='confirmorder.html'">
									<span class="am-u-sm-1 edit-radio am-text-primary am-icon-circle-o"></span>
									<div class="am-u-sm-3 am-list-thumb">
										<img src="assets/i/sj/10.jpg" />
									</div>
									<div class=" am-u-sm-9 am-list-main">
										<h3 class="am-list-item-hd">
					              人工普通洗车&nbsp;&nbsp;&nbsp;&nbsp;
					            </h3>
										<div class="am-list-item-text">数量：1&nbsp;&nbsp;总价：18</div>
										<button class="am-btn am-lfet  am-btn-sm am-btn-danger">未付款</button>
									</div>
									<div class="am-list-phone">
										<span class="am-primary am-icon-md am-icon-angle-right"></span>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<!--未付款tab-->
				<div data-tab-panel-1 class="am-tab-panel ">
					<div data-am-widget="list_news" class="am-list-news am-list-news-default" style="margin: 0;">
						<div class="am-list-news-bd">
							<ul class="am-list">
								<!--缩略图在标题左边-->
								<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left" onclick="location.href='confirmorder.html'">
									<span class="am-u-sm-1 edit-radio am-text-primary am-icon-circle-o"></span>
									<div class="am-u-sm-3 am-list-thumb">
										<img src="assets/i/sj/10.jpg" />
									</div>
									<div class=" am-u-sm-9 am-list-main">
										<h3 class="am-list-item-hd">
					              人工普通洗车&nbsp;&nbsp;&nbsp;&nbsp;
					            </h3>
										<div class="am-list-item-text">数量：1&nbsp;&nbsp;总价：18</div>
										<button class="am-btn am-lfet  am-btn-sm am-btn-danger">未付款</button>
									</div>
									<div class="am-list-phone">
										<span class="am-primary am-icon-md am-icon-angle-right"></span>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<!--未消费tab-->
				<div data-tab-panel-2 class="am-tab-panel ">
					<div data-am-widget="list_news" class="am-list-news am-list-news-default" style="margin: 0;">
						<div class="am-list-news-bd">
							<ul class="am-list">
								<!--缩略图在标题左边-->
								<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left" onclick="location.href='detailorder.html'">
									<span class="am-u-sm-1 edit-radio am-text-primary am-icon-circle-o"></span>
									<div class="am-u-sm-3 am-list-thumb">
										<img src="assets/i/sj/10.jpg" />
									</div>
									<div class=" am-u-sm-9 am-list-main">
										<h3 class="am-list-item-hd">
					              人工普通洗车&nbsp;&nbsp;&nbsp;&nbsp;
					            </h3>
										<div class="am-list-item-text">数量：1&nbsp;&nbsp;总价：18</div>
										<button class="am-btn am-lfet  am-btn-sm am-btn-warning">未消费</button>
									</div>
									<div class="am-list-phone">
										<span class="am-primary am-icon-md am-icon-angle-right"></span>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<!--已消费tab-->
				<div data-tab-panel-3 class="am-tab-panel ">
					<div data-am-widget="list_news" class="am-list-news am-list-news-default" style="margin: 0;">
						<div class="am-list-news-bd">
							<ul class="am-list">
								<!--缩略图在标题左边-->
								<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
									<span class="am-u-sm-1 edit-radio am-text-primary am-icon-circle-o"></span>
									<a href="serdetail.html">
										<div class="am-u-sm-3 am-list-thumb">
											<img src="assets/i/sj/10.jpg" />
										</div>
										<div class=" am-u-sm-9 am-list-main">
											<h3 class="am-list-item-hd">
					              人工普通洗车&nbsp;&nbsp;&nbsp;&nbsp;
					            </h3>
											<div class="am-list-item-text">数量：1&nbsp;&nbsp;总价：18</div>
											<button class="am-btn am-lfet am-btn-sm">已消费</button>
										</div>
										<div class="am-list-phone">
											<span class="am-primary am-icon-md am-icon-angle-right"></span>
										</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>

			</div>
		</div>
		<div class="am-g del-favour-fixed">
			<button class="del-favour am-btn am-btn-danger am-btn-block">删除 </button>
		</div>
		<script type="text/x-handlebars-template" id="amz-tpl">
			{{>navbar navbar}}
		</script>
		<script src="assets/js/jquery.min.js"></script>
		<script src="assets/js/amazeui.min.js"></script>
		<script src="assets/js/handlebars.min.js"></script>
		<script src="assets/js/amazeui.widgets.helper.js"></script>
		<script src="assets/js/app.js"></script>
		<script type="text/javascript">
			$(function() {
				var navEdit = $("#nav_edit");
				navEdit.click(function() {
					edit();
				});
				$(".am-list-item-desced").click(function() {
					$(this).find('.edit-radio').toggleClass('am-icon-circle-o').toggleClass('am-icon-circle');
				});
				$(".del-favour").click(function() {
					$(".am-icon-circle").parent('li').remove();
				});
				$("a[href ='[data-tab-panel-2]']").click(function() {
					if (navEdit.text() == '取消') {
						navEdit.trigger('click');
					}
				});
				//编辑订单
				function edit() {
					var list = $(".am-list-item-desced");
					var navEdit = $("#nav_edit");
					if (navEdit.text() === '编辑') {
						list.each(function() {
							var onclickVal1 = $(this).attr('onclick');
							var onclickVal2 = 'return false;';
							$(this).attr('onclick', onclickVal2);
							$(this).attr('data-url', onclickVal1);
						});
						navEdit.text('取消');
					} else {
						list.each(function() {
							var dataUrl = $(this).attr('data-url');
							$(this).attr('onclick', dataUrl);
						});
						navEdit.text('编辑');
					}
					$(".edit-radio").toggle();
					var main = $(".am-list-main");
					var thumb = $(".am-list-thumb");
					var style = thumb.attr('style');
					main.toggleClass('am-u-sm-9').toggleClass('am-u-sm-8');
					$(".del-favour-fixed").toggle();
				}
			});
		</script>
	</body>

</html>